import React from 'react'
import { Layout, message } from 'antd'
import { AudioOutlined } from '@ant-design/icons'
import { experimentalStyled, IconButton } from '@material-ui/core'
import { Showindex } from '../types'
import { Prompt2 } from '../../components/prompt'
const { Content, Header } = Layout
type Props = {
    setshowindex: (setshowindex: Showindex) => void,
    fullscreen(): void
}


const Mybutton = experimentalStyled(IconButton)({
    width: '100px',
    height: '100px',
    borderRadius: '50%',
    fontSize: '74px',
    fontWeight: 'bold',
    color: '#ffffff',
    textAlign: 'center'
})

export default function (prop: Props) {
    const { setshowindex, fullscreen } = prop
    function mediaevent() {
        location.replace('index.html?a=1#/resources')
    }
    function gosetup() {
        const data = Prompt2({
            message: '请输入管理员密码',
            visible: false
        })
        data.then(e => {
            if (e && ['hit1920', '20160418'].includes(e)) {
                setshowindex('setup')
            } else {
                message.info('密码不正确');
            }
        }).catch(e => {
            console.log(e)
        })
    }

    return <>
        <Header onDoubleClick={fullscreen}>
            <Mybutton onClick={(e) => {
                e.stopPropagation()
                gosetup()
            }} >
                <svg className="icon" aria-hidden="true">
                    <use xlinkHref="#iconshezhi"></use>
                </svg>
            </Mybutton>
        </Header>
        <Content className="left left1" >
            <div className="left-index">
                <div className="left-index-a" onClick={() => { setshowindex('video') }}>
                    <div className="left-index-icon" >
                        <svg className="icon" aria-hidden="true" >
                            <use xlinkHref="#iconluxiang"></use>
                        </svg>
                    </div>
                    <div className="left-index-text" >
                        <span>手势模仿</span>
                    </div>
                </div>
                <div className="left-index-a" onClick={() => { setshowindex('audio') }}>
                    <div className="left-index-icon">
                        <AudioOutlined className="icon" />
                    </div>
                    <div className="left-index-text" >
                        <span>语音交互</span>
                    </div>
                </div>
                <div className="left-index-a" onClick={() => mediaevent()} >
                    <div className="left-index-icon" >
                        <svg className="icon" aria-hidden="true" >
                            <use xlinkHref="#icondaima"></use>
                        </svg>
                    </div>
                    <div className="left-index-text" >
                        <span>创新编辑</span>
                    </div>
                </div>
            </div>
        </Content >
    </>
}